<!--
功能：管理员公告栏内容编辑页面,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/12 17:04,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div>
    <div class="header">轮播图图片</div>
    <div class="box-header">
      <div class="image"
           v-for="i in image"
           @mouseover="show = i.id"
           @mouseout="show = 0"
           :key="i.id">
        <i class="el-icon-circle-close"
           @click="remove(i)"
           :class="show==i.id? 'show':''"></i>
        <el-image :src="i.url"
                  fit="fill"
                  class="page"></el-image>
      </div>
      <div class="image add">
        <span class="el-icon-plus i1"></span>
      </div>
    </div>
    <div class="header">公告内容</div>
    <div class="box-main">
      <div class="content image"
           v-for="c in content"
           @mouseover="show1 = c.id"
           @mouseout="show1 = 0"
           :key="c.id">
        <i class="el-icon-circle-close"
           @click="removeNotice(c)"
           :class="show1==c.id? 'show':''"></i>
        <div class="dv1">{{ c.title }}</div>
        <div class="dv2">{{ c.content }}</div>
        <div class="dv3">
          <span>{{ c.user.name }}</span>
          <span>{{ c.time }}</span>
        </div>
      </div>
      <div class="image add" @click="dialogVisible = true">
        <span class="el-icon-plus"></span>
      </div>
    </div>
    <div class="dialog">
      <el-dialog
        title="公告填写"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose">
        <div class="input">
          <el-input
            placeholder="请输入标题内容"
            prefix-icon="el-icon-edit"
            maxlength="10"
            show-word-limit
            v-model="notice.title">
          </el-input>
        </div>
        <div class="text">
          <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入公告内容"
            maxlength="30"
            show-word-limit
            v-model="notice.content">
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="updateNotice">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {message, confirm} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "NoticeRoot",
  data() {
    return {
      notice: {
        title: '',
        content: '',
        uid: '',
        time: ''
      },
      dialogVisible: false,
      show1: 0,
      content: [],
      show: 0,
      image: [{
        id: 1,
        url: require("../../assets/imag/g1.png")
      }, {
        id: 2,
        url: require("../../assets/imag/g2.png")
      }, {
        id: 3,
        url: require("../../assets/imag/g3.jpg")
      }]
    };
  },
  components: {},
  computed: {
    ...mapState(["user"])
  },
  mounted() {
    this.findNotice()
  },
  methods: {
    handleClose() {
      //  关闭
      this.notice.title=this.notice.content=''
      this.dialogVisible = false
    },
    remove(i) {
      console.log(i)
    },
    findNotice() {
      this.$http.get('user/notice').then(response => {
        this.content = response.data
        message("success", "成功")
      }).catch(err => {
        message("error", "错误")
      })
    },
    removeNotice(c) {
      //公告删除
      this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('root/noticeRemove', c).then(response => {
          message("success", "成功")
        }).catch(err => {
          message("error", "错误")
        }).finally(() => {
          this.findNotice()
        })
      }).catch(() => {

      });
    },
    updateNotice(){
      if ((this.notice.title.trim() != '')&&(this.notice.content.trim() != '')){
        let t = new Date()
        this.dialogVisible = false
        this.notice.uid=this.user.id
        this.notice.time=t.getFullYear() + '-' + (t.getMonth() + 1) + '-' + t.getDate()
        console.log(this.notice)
        //  数据更新操作
        this.$http.post('root/insertNotice', this.notice).then(response => {
          message("success", "成功")
          this.notice.title=this.notice.content=this.notice.time=''
        }).catch(err => {
          message("error", "错误")
        }).finally(() => {
          this.findNotice()
        })
      }else {
        message("error","内容不可为空！")
      }

    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>

.input{
  margin: 20px 0;
}

/*公告内容区域*/
.box-main {
  width: 100%;
  min-height: 300px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  /*background-color: pink;*/
}

.content i {
  top: 0;
  color: #ffffff;
}

.dv1 {
  height: 15%;
  background-color: #909399;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.dv2 {
  height: 75%;
  letter-spacing: 4px;
  text-indent: 2em;
  background-color: #F3F3F3;
}

.dv3 {
  height: 10%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  color: #ffffff;
  background-color: #6E6E6E;
}


/**/

.header {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  border-left: 5px solid red;
  padding-left: 20px;
  line-height: 50px;
  font-size: 20px;
}

/*头部样式 轮播图图片更改*/
.box-header {
  width: 100%;
  min-height: 250px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.image {
  width: 280px;
  height: 200px;
  margin: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: red;
}

i {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  color: red;
  font-size: 30px;
  display: none;
}

.show {
  display: block;
}

.add {
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  background-color: #909399;
}

.page {
  width: 280px;
  height: 200px;
  transition: all .3s;
}

.image:hover .page {
  transform: scale(1.3);
}

/**/
</style>
